@import "tailwindcss";

@theme {
  --color-h3-color: #f3e5ab;
  --color-accent-color: #cccccc;
  --color-light-bg-color: #fafafa;
  --color-dark-bg-color: #242424;
  --font-display:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

@layer base {
  :root {
    font-family: var(--font-display);

    color-scheme: light dark;
    background-color: var(--color-dark-bg-color);
  }

  main {
    @apply text-center p-[1em] mx-auto;
  }

  body {
    @apply m-0 min-w-[20rem];
  }
}

@media (prefers-color-scheme: light) {
  :root {
    background-color: var(--color-light-bg-color);
  }

  a:hover {
    color: var(--color-accent-color);
  }
}

@utility popup-h3-title {
  @apply text-h3-color uppercase text-[1.5rem] font-extralight my-2 mx-auto;
}

@utility calc-area {
  @apply flex justify-center items-center m-2;
}

@utility calc-btns {
  @apply outline-none cursor-pointer text-accent-color bg-transparent 
    border-[1px] border-solid border-accent-color rounded py-[0.5rem] 
    px-[1rem] text-[1rem] w-[3rem];
}

@utility calc-label {
  @apply mx-[1rem] text-[1.5rem];
}

@utility link-color {
  @apply text-[0.5rem] m-[0.5rem] text-accent-color no-underline;
}
